import { ProColumns, ProTable } from '@/components/Pro';
import type { ActionType } from '@/components/Pro/';
import { realTimeMonitoringControllerMeterOverview } from '@/services/ess/realTimeMonitoring';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useRef, useState } from 'react';
import { useIntl } from 'umi';
import { useIsFresh, useSelectedDeviceNode } from '../SelectedDeviceNodeContext';
import { Info } from './info';

export const Overview: React.FC = () => {
  const deviceNode = useSelectedDeviceNode();
  const [onlinState, setOnlieState] = useState([]);
  const [voltageLevel, setvoltageLevel] = useState([]);
  const [data, setData] = useState([]);
  const { isRefesh, setIsRefesh } = useIsFresh();
  const actionRef = useRef<ActionType>();
  const intl = useIntl();
  useEffect(() => {
    (async () => {
      try {
        //在线状态字典
        let OnlineState = await fetchDictInfo(DATABASE_TYPE_ENUM.ONLINE_STATUS);
        setOnlieState(OnlineState || []);

        //点压等级
        fetchDictInfo(DATABASE_TYPE_ENUM.VOLT_LEVEL).then((data) => {
          console.log(data, '电压等级');
          setvoltageLevel(data || []);
        });
      } catch (error) {}
    })();
  }, []);

  useEffect(() => {
    if (isRefesh) {
      actionRef.current?.reloadAndRest?.();
    }
  }, [isRefesh]);
  const columns: ProColumns[] = [
    {
      title: intl.formatMessage({ id: 'data.s/N' }),
      dataIndex: 'pageIndex',
      valueType: 'index',
      search: false,
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.mName' }),
      dataIndex: 'deviceName',
      valueType: 'text',
      render: (_, record) => {
        return record?.name;
      },
    },
    {
      title: intl.formatMessage({ id: 'stationRealtimeMonitoring.voltageLevel' }),
      dataIndex: 'voltLevel',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
        options: voltageLevel,
      },
      render: (_, record) => {
        let arr = voltageLevel.filter((res) => Number(res?.value) === Number(record?.voltLevel));
        return arr[0]?.label || '--';
      },
    },
    {
      title: intl.formatMessage({ id: 'data.onlineStatus' }),
      dataIndex: 'onlineState',
      valueType: 'select',
      fieldProps: {
        maxTagCount: 'responsive',
        options: onlinState,
      },
      render: (_, record) => {
        let arr = onlinState.filter((res) => Number(res?.value) === Number(record?.onlineState));

        return arr[0]?.label || '--';
      },
    },
    {
      title: `${intl.formatMessage({ id: 'stationRealtimeMonitoring.activePower' })}`,
      dataIndex: 'activePower',
      search: false,
    },
  ];
  return (
    <>
      <Info data={data} />
      <ProTable
        style={{ padding: '30px' }}
        columns={columns}
        sticky
        params={{
          deviceCode: deviceNode?.deviceCode ?? undefined,
        }}
        actionRef={actionRef}
        request={async (values) => {
          try {
            let params = {
              ...values,
              areaId: deviceNode?.areaId?.toString() ?? undefined,
              deviceCode: deviceNode?.deviceCode ?? undefined,
              deviceType: deviceNode?.deviceType ?? undefined,
            };

            console.log(params, '相应参数dsfsdfdfsdfs');

            let reslut = await realTimeMonitoringControllerMeterOverview(params);
            let changeReslut = {
              ...reslut,
              data: reslut?.data?.dataList || [],
              total: reslut?.data?.dataList?.length,
            };
            setData(reslut?.data);
            setIsRefesh(false); // 数据加载成功后重置 isRefesh
            return changeReslut;
          } catch (err) {
            console.log(err, '错误');
          }
        }}
        rowKey="key"
        pagination={{
          showQuickJumper: true,
        }}
        dateFormatter="string"
      />
    </>
  );
};

export default Overview;
